<template>
  <view>
    <lg-topbar :bgColor="bgColor" height="160rpx">
      <view class="bg-topbar-content">
        <image v-if="props.VehicleSeries" :src="props.VehicleSeries" alt="" />
        <view class="text-bold" :style="props.titleStyle">{{ props.title || ' جمل' }}</view>
      </view>
    </lg-topbar>
  </view>
</template>

<script setup lang="ts">
import { defineProps } from "vue";

const props = defineProps<{
  bgColor?: string;
  VehicleSeries?: string;
  titleStyle?: string;
  title?: string;
}>();
</script>

<style scoped lang="scss">
@import "@/static/css/index.scss";

.bg-topbar-content {
  width: 100%;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  word-break: break-all;
  color: $primary-f;
  overflow: hidden;

  image {
    width: 86rpx;
    height: 86rpx;
  }

  .text-bold {
    font-weight: bold;
  }
}
</style>